<template>
  <div class="list">
    <!-- 111商品列表 -->
    <el-collapse class="collapse">
      <el-collapse-item title="商品管理介绍" name="1">
        <div>商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>
      </el-collapse-item>
    </el-collapse>

    <el-collapse class="collapse" style="margin:30px">
      <el-collapse-item title="条件查询" name="1">
        <div>
          <el-form ref="form" :model="form" label-width="80px" :inline="false" size="normal">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="商品名称">
                  <el-input v-model="form.name" clearable placeholder="请输入内容" />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="商品货号">
                  <el-input v-model="form.productSn" clearable placeholder="请输入内容" />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="品牌">
                  <el-select v-model="form.brandId" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="上架状态">
                  <el-select v-model="form.publishStatus" clearable placeholder="请选择">
                    <el-option
                      v-for="(item,index) in grounding"
                      :key="index"
                      :label="item.name"
                      :value="item.publishStatus"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="审核状态">
                  <el-select v-model="form.verifyStatus" clearable placeholder="请选择">
                    <el-option
                      v-for="(item,index) in audit"
                      :key="index"
                      :label="item.name"
                      :value="item.verifyStatus"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="10">
                <el-form-item>
                  <el-button size="medium" type="primary" @click="onSubmit(form)">搜索</el-button>
                  <el-button size="medium" @click="reset('form')">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-card shadow="always" class="card" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="medium">新增</el-button>
        <el-button type="primary" size="medium">导出商品列表excel文件</el-button>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%"
        height="600"
      >
        <el-table-column
          type="index"
          label="序号"
          fixed
          align="center"
        />
        <el-table-column
          label="商品图片"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.pic" alt="" class="img">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="350"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
            <div>品牌:{{ scope.row.brandName }}</div>
            <div>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="商品价格"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <div>原价:{{ scope.row.originalPrice }}</div>
            <div>现价:{{ scope.row.price }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productCategoryName"
          label="商品类别"
          width="150"
          align="center"
        />
        <el-table-column
          prop="address"
          label="标签"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <div>最新:
              <el-switch
                v-model="scope.row.newStatus"
                :active-value="1"
                :inactive-value="0"
                @change="isChangeNewStatus(scope.row)"
              />
              <!-- newStatus最新状态 -->
            </div>
            <div style="margin-top:10px">推荐:
              <el-switch
                v-model="scope.row.recommendStatus"
                :active-value="1"
                :inactive-value="0"
                @change="isChangeRecommendStatus(scope.row)"
              />
              <!-- recommendStatus推荐 -->
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="标签2"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <div>发布:
              <el-switch
                v-model="scope.row.publishStatus"
                :active-value="1"
                :inactive-value="0"
                @change="isChangePublishStatus(scope.row)"
              />
              <!-- publishStatus发布 -->
            </div>
            <div style="margin-top:10px">审核:
              <el-switch
                v-model="scope.row.verifyStatus"
                :active-value="1"
                :inactive-value="0"
                @change="isChangeVerifyStatus(scope.row)"
              />
              <!-- verifyStatus审核 -->
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="sku"
          width="150"
          align="center"
        />
        <el-table-column
          prop="weight"
          label="重量"
          width="80"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          width="150"
          align="center"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="150"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <span style="margin-right:10px;color:#00f; cursor:pointer">编辑</span>
            <span style="color:#f00; cursor:pointer" @click="del(scope.row)"> 删除</span>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="pages.total"
        :current-page="pages.start"
        :page-sizes="pages.pageSize"
        :page-size="pages.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import {
  productsByPage,
  switchNewStatus, // 是否更新
  switchRecommandStatus, // 是否推荐
  switchPublishStatus, // 是否发布
  switchVerifyStatus, // 是否审核
  findAllBrand, // 品牌列表
  del as delApi
} from '@/api/product/list/index'
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      pages: {
        start: 1,
        limit: 10,
        total: '',
        pageSize: [10, 20, 30, 40]
      },
      list: [],
      options: [], // 品牌列表
      form: {},
      grounding: [ // 上架信息
        {
          name: '上架',
          publishStatus: 1
        },
        {
          name: '未上架',
          publishStatus: 0
        }
      ],
      audit: [
        {
          name: '审核',
          verifyStatus: 1
        },
        {
          name: '未审核',
          verifyStatus: 0
        }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.init()
    findAllBrand().then(res => {
      console.log(res)
      const { data, success, message: errMsg } = res
      if (success) {
        const { items } = data
        this.options = items
      } else {
        this.$message.error(errMsg)
      }
    })
  },
  mounted() {

  },
  methods: {
    init() {
      productsByPage(this.pages.start, this.pages.limit, this.form).then(res => {
        console.log(res)
        const { data, message: errMsg, success } = res
        if (success) {
          const { rows, total } = data
          this.pages.total = total // 获取商品总长度
          this.list = rows // 获取商品列表
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    isChangeNewStatus(val) {
      console.log(val)
      switchNewStatus({
        productId: val.id,
        status: val.newStatus
      }).then(res => {
        const { message: errMsg, success } = res
        if (success) {
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    isChangeRecommendStatus(val) {
      console.log(val)
      switchRecommandStatus({
        productId: val.id,
        status: val.recommendStatus
      }).then(res => {
        const { message: errMsg, success } = res
        if (success) {
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    isChangePublishStatus(val) {
      console.log(val)
      switchPublishStatus({
        productId: val.id,
        status: val.publishStatus
      }).then(res => {
        const { message: errMsg, success } = res
        if (success) {
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    isChangeVerifyStatus(val) {
      console.log(val)
      switchVerifyStatus({
        productId: val.id,
        status: val.verifyStatus
      }).then(res => {
        const { message: errMsg, success } = res
        if (success) {
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        } else {
          this.$message.error(errMsg)
        }
      })
    },
    onSubmit(el) { // 点击搜索
      console.log(el)
      this.form = el
      this.init()
    },
    reset(el) { // 点击重置
      this.$refs[el].resetFields()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pages.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pages.start = val
      this.init()
    },
    del(val) { // 点击删除
      console.log(val)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delApi(val.id).then(res => {
          console.log(res)
          const { message: errMsg, success } = res
          if (success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.init()
          } else {
            this.$message.error(errMsg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list{
.collapse{
  padding: 10px;
  box-shadow: border-box;
  background-color: #fff;
}
.card{
  margin: 30px;
  }
  .img{
    width: 100px;
    height: 100px;
  }
}
</style>
